import Vue from 'vue';
import Vuex from 'vuex';

// 导入axios;
import axios from 'axios';
axios.defaults.baseURL = 'http://106.13.182.88:3001';
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (json) {
    const arr = [];
    for (let key in json) {
        arr.push(`${key}=${json[key]}`);
    }
    return arr.join('&');
}];
Vue.prototype.$http = axios;

// 将vuex注册成vuex的插件
Vue.use(Vuex);
// 创建vuex对象
const store = new Vuex.Store({
    // 状态数据
    state: {
        brands: [], // 品牌列表
        brand: {}, // 当前需要被添加的品牌对象
        current: {} // 当前被编辑的品牌对象
    },
    // 同步方法
    mutations: {
        // 获取品牌列表
        getBrands(state, brands) {
            state.brands = brands;
        },
        // 新增品牌
        add(state, brand) {
            state.brands.unshift(brand);
        },
        del(state, id) {
            const index = state.brands.findIndex(item => item.id == id);
            state.brands.splice(index, 1);
        },
        update(state, newBrand) {
            // const index=state.brands.findIndex(item=>item.id==id);
            // state.brands[index]=newBrand;
        },
        // 获取当前品牌的详细信息
        getBrand(state, id) {
            // 获取当前被编辑的品牌的对象的索引
            const index = state.brands.findIndex(item => item.id == id);
            // 更新当前被编辑的品牌信息
            state.current = state.brands[index];
        }
    },
    // 计算属性
    getters: {
        // 获取品牌数量
        brandsCount(state) {
            return state.brands.length;
        }
    },
    // 异步操作方法
    actions: {
        getInitBrands({
            commit
        }) {
            axios.get(`/brand`).then(({
                data
            }) => {
                if (data.status == 0) {
                    // 通过调用mutations中的getBrands方法更新brands状态数据
                    commit('getBrands', data.message);
                }
            });
        },
        addBrand({
            commit
        }, brand) {
            axios.post(`/brand`, {
                name: brand.name
            }).then(({
                data
            }) => {
                if (data.status == 0) {
                    // 通过调用mutations中的getBrands方法更新brands状态数据
                    commit('add', brand);
                }
            });
        },
        delBrand(context, id) {
            axios.delete(`/brand/${id}`).then(({
                data
            }) => {
                if (data.status == 0) {
                    // 通过调用mutations中的getBrands方法更新brands状态数据
                    context.commit('del', id);
                }
            });
        },
        updateBrand(context, current) {
            axios.put(`/brand/${current.id}`, {
                name: current.name
            }).then(({
                data
            }) => {
                if (data.status == 0) {
                    // 重置表单内容
                    context.state.current = {};
                }
            });
        }
    }
});
export default store;